<template>
  <el-card style="margin-bottom:20px;box-shadow:unset;border:unset">
    <div slot="header" class="clearfix">
      <span>资料填写</span>
    </div>

    <el-form
      ref="loginForm"
      :model="user"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <el-form-item prop="username">
        <span class="svg-container">
          <!-- <svg-icon icon-class="user" /> -->
        </span>
        <el-input
          ref="username"
          v-model="user.name"
          placeholder="请输入您在馨艺平台对用户展示的艺术家名称"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <!-- <svg-icon icon-class="password" /> -->
        </span>
        <el-input
          ref="password"
          v-model="user.cardname"
           type="text"
          placeholder="艺术家真实姓名（不用于展示）"
          name="password"
          tabindex="2"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
         
        />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <!-- <svg-icon icon-class="password" /> -->
        </span>
        <el-input
          ref="password"
          v-model="user.address"
           type="text"
          placeholder="输入艺术家所在的城市"
          name="address"
          tabindex="2"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
          
        />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <!-- <svg-icon icon-class="password" /> -->
        </span>
        <el-input
        
          ref="desc"
          v-model="user.introduction"
           type="textarea"
          placeholder="输入艺术家简介，不超过100字"
          name="desc"
          tabindex="3"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
        />
      </el-form-item>
          <el-form-item prop="password">
        <span class="svg-container">
          <!-- <svg-icon icon-class="password" /> -->
        </span>
        <el-input
          ref="wxnumber"
          v-model="user.wxnumber"
           type="text"
          placeholder="输入用于收款的微信号（收益将直接打入此微信）"
          name="wxnumber"
          tabindex="4"
          autocomplete="on"
          @keyup.native="checkCapslock"
          @blur="capsTooltip = false"
      
        />
      </el-form-item>
      <el-form-item prop="password">
        <span style='display:block'>上传头像</span>
        <van-uploader name="carda" :after-read="uploadvideo">
          <div style="width:100%" class="upload-btn">
            <img   style="width:100%" :src="uploadImage" class="carda" />
          </div>

          <!-- <div v-if="carda!=null" class="upload-img">
              <img  width="100%" :src="carda.src" alt="">
          </div>-->
        </van-uploader>
        <avatar-cutter v-if="showCutter&&os.isPc"  @modifyoriphoto="modifyoriphoto"  @cancel="showCutter = false"  @enter="uploadAvatar" return-type="url" :imgSrc="imgSrc"></avatar-cutter>

      </el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="tijiao"
      >提交</el-button>
    </el-form>

    <van-popup :overlay="false" :close-on-click-overlay="false" v-model="show">
      <van-circle
        color="#07c160"
        fill="#fff"
        size="120px"
        layer-color="#ebedf0"
        v-model="currentRate"
        :rate="100"
        :speed="0"
        :text="text"
      />
    </van-popup>
    <!-- <image-clipper ref="clipper" v-if="showCutter&&!os.isPc&&1==0" :img="imgSrcbase64" :clipper-img-width="250" :clipper-img-height="250" @enter="uploadAvatar" @cancel="showCutter=false"></image-clipper> -->

 <simple-cropper  :initParam="uploadParam" @successCallback="uploadAvatar" ref="cropper" v-if="showCutter&&!os.isPc" > 
 <!-- <img :src="userImg">  -->
 </simple-cropper>
  </el-card>
</template>

<script>
import PanThumb from "@/components/PanThumb";
import ImageClipper from '@/components/imageClipper/imageClipper'
import SimpleCropper from '@/components/SimpleCropper/SimpleCropper'

import {
  Circle,
  Icon,
  RadioGroup,
  Radio,
  Popup,
  Field,
  DatetimePicker,
  Step,
  Steps,
  Uploader,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup
} from "vant";
import Vue from "vue";
import { validUsername } from "@/utils/validate";
import { addmerchant, addshop,gettokens } from "@/api/user";
Vue.use(Uploader)
  .use(Circle)
  .use(Popup);
import AvatarCutter from '@/components/avatar-cutter/avatar-cutter'
export default {
  name: "Profileedit",
  components: { PanThumb,AvatarCutter,ImageClipper,SimpleCropper },
  // props: {
  //   user: {
  //     type: Object,
  //     default: () => {
  //       return {

  //         name: '',
  //         email: '',
  //         avatar: '',
  //         roles: ''
  //       }
  //     }
  //   }
  // },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("昵称有误"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value || value.length == 0) {
        callback(new Error("姓名有误"));
      } else {
        callback();
      }
    };
    return {
       uploadParam: { 
  fileType: 'recruit', // 其他上传参数 
  uploadURL: this.$dataURL + 'uploadAction/qcloudImg', // 上传地址 
  scale: 4 // 相对手机屏幕放大的倍数: 4倍 
  }, 
      os:{},
      imgSrcbase64:'',
      piccount:0,
    oriphoto:'',
       imgSrccut:null,
       imgSrc:null,
              showCutter: false, 
      // carda:null,
      loading: false,
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      user: { name: "", cardname: "", description: "", avatar: "" },
      uploadImage: require("@/assets/images/case/tupian.png"),
      uploadImage1: require("@/assets/images/case/zhengmian.png"),
      uploadImage2: require("@/assets/images/case/fanmian.png"),
      delImage: require("@/assets/images/case/del.png"),

      checked: true,
      imagelist: [],
      imagelist1: [],
      imagelist2: [],
      imagelist3: [],
      imagelist4: [],

      uploader: null,
      carda: null,
      cardb: null,
      uploadtag: 0,
      show: false,
      currentRate: 0,
      rate: 100,
      speed: 100,
      text: "0%"
    };
  },
  mounted() {
var os = function() {  
     var ua = navigator.userAgent,  
     isWindowsPhone = /(?:Windows Phone)/.test(ua),  
     isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,   
     isAndroid = /(?:Android)/.test(ua),   
     isFireFox = /(?:Firefox)/.test(ua),   
     isChrome = /(?:Chrome|CriOS)/.test(ua),  
     isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),  
     isPhone = /(?:iPhone)/.test(ua) && !isTablet,  
     isPc = !isPhone && !isAndroid && !isSymbian;  
     return {  
          isTablet: isTablet,  
          isPhone: isPhone,  
          isAndroid : isAndroid,  
          isPc : isPc  
     };  
}();  
this.os=os;
  this.inituploader();

  },
  methods: {
       // 上传头像 
 uploadChange (event) { 
  //  console.log("+++++++++开始upload");
  this.$refs['cropper'].uploadChange(event);
 }, 
      modifyoriphoto(neworifile)
    {
 //base
   this.imgSrc=neworifile;

    },
     // 上传裁剪好的头像
         uploadAvatar(src) {
           this.$loadingshow();
                      console.log('确认2')

           console.log('接收到裁剪后的图片了')
           this.imgSrccut = src;
                var _this=this;
           function goupload(resizefile){
           _this.showCutter = false;
           var imgori=_this.imgSrc;
           //裁剪后
         var userData =
          '{"Vod":{"StorageLocation":"","Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19","index":"1","Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';
                //裁剪前
                var userData2 =
          '{"Vod":{"StorageLocation":"","Title":"this is title.我是标题","Description":"this is desc.我是描述","CateId":"19","index":"2","Tags":"tag1,tag2,标签3","fengmian":"http://www.baidu.com"}}';
       
  _this.uploader.addFile(
         resizefile,
          null,
          null,
          null,
          userData
        );
       _this.uploader.addFile(
         imgori,
          null,
          null,
          null,
          userData2
        );
    
     
     _this.piccount=0;
      _this.uploader.startUpload();
           }

       this.resize(src,70,70,goupload)




        },      // 从base64转化为file文件
    base64ToFile(base64Str, fileName) {
      const params = base64Str.split(',')
      const mime = params[0].match(/:(.*?)/)[1]
      const fileData = atob(params[1]) // 解码Base64
      let { length } = fileData
      const uint8Array = new Uint8Array(length)
      while (length) {
        length -= 1
        uint8Array[length] = fileData.charCodeAt(length)
      }
      return new File([uint8Array], fileName, { type: mime })
    },
           resize(file,width,height,reply){
          


var reader = new FileReader(), img = new Image();

// 选择的文件对象
 reader.readAsDataURL(file);    
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
    img.src = e.target.result;
};
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
 
// base64地址图片加载完毕后
var that=this;
img.onload = function () {
    // 图片原始尺寸
    var originWidth = this.width;
    var originHeight = this.height;
    // 最大尺寸限制
    var maxWidth = width, maxHeight = height;
    // 目标尺寸
    var targetWidth = originWidth, targetHeight = originHeight;
    // 图片尺寸超过400x400的限制
    if (originWidth > maxWidth || originHeight > maxHeight) {
        if (originWidth / originHeight > maxWidth / maxHeight) {
            // 更宽，按照宽度限定尺寸
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (originHeight / originWidth));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (originWidth / originHeight));
        }
    }
        
    // canvas对图片进行缩放
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    // 清除画布
    context.clearRect(0, 0, targetWidth, targetHeight);
    // 图片压缩
    context.drawImage(img, 0, 0, targetWidth, targetHeight);
    var result=canvas.toDataURL();
    var resizeimagecut=that.base64ToFile(result, 'resize.png')
      reply(resizeimagecut);

}




        },
     inituploader() {
        
    var _this = this;
      this.uploader = new AliyunUpload.Vod({
        //分片大小默认1M，不能小于100K
        partSize: 1048576,
        //并行上传分片个数，默认5
        parallel: 5,
        //网络原因失败时，重新上传次数，默认为3
        retryCount: 3,
        //网络原因失败时，重新上传间隔时间，默认为2秒
        retryDuration: 2,
        // 开始上传
        onUploadstarted: function(uploadInfo) {
          // _this.$loadingshowjindu('0%')
          console.log(
            "onUploadStarted:" +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
          );
          //上传方式1, 需要根据uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress，如果videoId有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // this.uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
          //上传方式2、

          //   $.ajax({
          //     url: "/api/getvideotoken",

          //     dataType: "json",
          //     type: "get",
          //     success: function(json) {
          //       //var uploadAddress = json.data.UploadAddress;
          //       //	var uploadAuth = json.data.UploadAuth;
          //       //var videoId = json.data.VideoId;
          //       //得到视频上传的凭证
          //       //vId = videoId;

          //       //如果此部分执行说明后端返回凭证成功，从data中获取返回的uploadAddress、uploadAuth、videoId，然后调用阿里云的api直接进行文件上传
          //       ///this.uploader.setUploadAuthAndAddress(uploadInfo, json.data.UploadAuth, json.data.UploadAddress, json.data.VideoId);
          //       this.uploader.setSTSToken(
          //         uploadInfo,
          //         json.result.key,
          //         json.result.secret,
          //         json.result.token
          //       );
          //     }
          //   });
          gettokens({}).then(res => {
              console.log(res)
              console.log(this.uploader)
            _this.uploader.setSTSToken(
              uploadInfo,
              res.result.key,
              res.result.secret,
              res.result.token
            );
          });
        },
        // 文件上传成功
        onUploadSucceed: function(uploadInfo) {

          console.log(
            "onUploadSucceed: " +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object +
              uploadInfo +
              JSON.stringify(uploadInfo)
          );
          console.log("videoId:" + uploadInfo.videoId);
               _this.piccount+=1;
          if(_this.piccount==2)
         {
           console.log('上传全部完成了')
                     _this.$loadingshowjindu( "100%")
             _this.$loadingshowjindu( "")
           _this.$loadingclose();

         } 
          if(uploadInfo.videoId==null)
          {

              //  var tempic="http://tests.sodataint.com/"+uploadInfo.object;
               
              //  var obj={};
              //  obj.src=tempic;
              //    console.log("uploadtag:"+_this.uploadtag)










              // 







               var tempic="http://tests.sodataint.com/"+uploadInfo.object;
               
           
           
                if(uploadInfo.videoInfo.index=='1')
                {
                          _this.uploadImage = tempic;
             
                
               console.log("==============================="+tempic)
                }
                else
                {
                   _this.oriphoto=tempic;
                }
                // if(_this.piccount==2)
                  //  _this.$toast('头像设置完成')






















                
          }
          else
          {
        //   _this.$toast("短视频上传完成" );
        //  _this.vid=uploadInfo.videoId;
        // _this.timer=  setInterval(() => {
        //     _this.getvideo();
        //  }, 3000);
        
          }
        },
        // 文件上传失败
        onUploadFailed: function(uploadInfo, code, message) {
          console.log(
            "onUploadFailed: file:" +
              uploadInfo.file.name +
              ",code:" +
              code +
              ", message:" +
              message
          );
        },
        // 文件上传进度，单位：字节
        onUploadProgress: function(uploadInfo, totalSize, loadedPercent) {
          console.log(
            "onUploadProgress:file:" +
              uploadInfo.file.name +
              ", fileSize:" +
              totalSize +
              ", percent:" +
              Math.ceil(loadedPercent * 100) +
              "%"
          );
          // $("#jindu").html("percent:" + Math.ceil(loadedPercent * 100) + "%");
             _this.$loadingshowjindu(Math.ceil(_this.piccount/2 * 100) + "%")
        },
        // 上传凭证超时
        onUploadTokenExpired: function(uploadInfo) {
          console.log("onUploadTokenExpired");
          //上传方式1  实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
          // uploader.resumeUploadWithAuth(uploadAuth);
          // 上传方式2 实现时，从新获取STS临时账号用于恢复上传
          // uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
        },
        //全部文件上传结束
        onUploadEnd: function(uploadInfo) {
          console.log("onUploadEnd: uploaded all the files");
        }
      });
    },
    closeloading()
    {
      this.$loadingclose();
    },
    tijiao() {
      var name=this.user.name+'';
      var cardname=this.user.cardname+'';
      var introduction=this.user.introduction;
      var uploadImage=this.uploadImage;
      if(!name)
      {
        this.$toast('昵称输入有误')
        return;
      }
         if( !cardname )
      {
        this.$toast('姓名有误')
        return;
      }
        if( !introduction )
      {
        this.$toast('简介未输入')
        return;
      }
      
        if(!uploadImage||uploadImage.indexOf('http://')==-1)
      {
        this.$toast('头像有误')
        return;
      }
         if(!(this.user.wxnumber+'').trim() )
      {
        this.$toast('微信号未输入')
        return;
      }
         if(!(this.user.address+'').trim())
      {
        this.$toast('地址未输入')
        return;
      }
      this.$store
        .dispatch("user/addmerchant", {
          companyType: 0,
          companyAudit: 1,
          companyName: this.user.name,
          companyContacts: this.user.cardname,
          companyAddress:this.user.address,
          companyAccountName:this.user.wxnumber
        })
        .then(() => {
          console.log("success ok loginbbb1");
          // alert('suu')
          // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          // this.$router.push('/profile')
          // this.loading = false
          this.loading = false;
          this.addshop();
        })
        .catch(() => {
          console.log("success ok loginaaa2");
          this.loading = false;
        });
    },
    addshop() {
      this.$store
        .dispatch("user/addshop", {
          status: 1,
          businessstatus: 1,
          brandName: this.user.name,
          shopLongDescription: this.user.introduction,
          tradeMark: this.uploadImage,
          pictures:this.oriphoto,
          words:this.oriphoto
        })
        .then(() => {
          //  console.log('success ok login1')
          // alert('suu')
          // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          this.loading = false;
          this.$toast("提交成功");
          this.$store.commit("user/SET_ROLES", ["商户"]);
          this.$store.commit("user/SET_NAME", this.user.name);
          this.$store.commit("user/SET_CARDNAME", this.user.cardname);
          this.$store.commit("user/SET_AVATAR", this.uploadImage);
          this.$store.commit("user/SET_INTRODUCTION", this.user.introduction);
          // this.$const roles = ['admin']
          this.$router.push("/documentation/index");
        })
        .catch(err => {
          console.log("success ok logincccaaa3" + err);
          this.loading = false;
        });
    },
    checkCapslock({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if (
          (shiftKey && (key >= "a" && key <= "z")) ||
          (!shiftKey && (key >= "A" && key <= "Z"))
        ) {
          this.capsTooltip = true;
        } else {
          this.capsTooltip = false;
        }
      }
      if (key === "CapsLock" && this.capsTooltip === true) {
        this.capsTooltip = false;
      }
    },
    saveuserinfo() {},
    uploadvideo(event, detail) {
    //         this.imgSrc=event.file;
    //          const reader = new FileReader()
    //   reader.onload = () => {
    //     this.imgSrcbase64 = reader.result
       
    //       this.showCutter=true;
    //        if(!this.os.isPc)
    //       this.uploadAvatar(this.imgSrc)
        
    // }
    // reader.readAsDataURL(this.imgSrc)
    //    // this.UpladFile(event.file);





 this.imgSrc=event.file;
      if(!this.os.isPc){
        this.showCutter=true;
        this.$nextTick(function(){
            this.uploadChange(event);
        })
          }
          else{

     const reader = new FileReader()
      reader.onload = () => {
        this.imgSrcbase64 = reader.result
          this.showCutter=true;
    }
    reader.readAsDataURL(this.imgSrc)


    }
















    },
    UpladFile(fileObj, base64str) {
      // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
      var form = new FormData(); // FormData 对象
      var isbase64 = 0;
      if (base64str) isbase64 = 1;
      var url = "/dev-api/mapi/customer/upload"; // 接收上传文件的后台地址
      if (fileObj) {
        form.append("file", fileObj); // 文件对象
      } else {
        var dataurl = base64str;
        var arr = dataurl.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var obj = new Blob([u8arr], { type: mime });

        form.append("file", obj, "pfxy.png");
      }

      this.xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
      this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
      this.xhr.onload = this.uploadComplete; //请求完成
      this.xhr.onerror = this.uploadFailed; //请求失败
      var _this = this;
      this.xhr.upload.onprogress = this.progressFunction; //【上传进度调用方法实现】
      this.xhr.upload.onloadstart = function() {
        //上传开始执行方法
        // var  ot = new Date().getTime();   //设置上传开始时间
        //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
        _this.show = true;

        _this.rate = 100;
        _this.currentRate = 0;
        _this.text = "";
      };

      this.xhr.send(form); //开始上传，发送form数据
    },
    //上传成功响应
    uploadComplete(evt) {
      //服务断接收完文件返回的结果
      this.show = false;
      // this.$loadingclose();
      var data = JSON.parse(evt.target.responseText);
      console.log("服务器响应");
      console.log(data);
      if (data.success) {
        console.log("上传成功");
        this.$toast("上传成功！");
        this.uploadImage = data.result;
        // this.uploadsuccess(data.result);
      } else {
        this.$toast("上传失败！");
      }
    },
    //上传失败
    uploadFailed(evt) {
      this.show = false;
      this.$loadingclose();
      this.$toast("上传失败！");
    },
    //取消上传
    cancleUploadFile() {
      this.show = false;
      this.$loadingclose();
      this.xhr.abort();
    },

    //上传进度实现方法，上传过程中会频繁调用该方法
    progressFunction(evt) {
      // var progressBar = document.getElementById("progressBar");
      // var percentageDiv = document.getElementById("percentage");
      // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
      if (evt.lengthComputable) {
        //
        // progressBar.max = evt.total;
        // progressBar.value = evt.loaded;
        // this.rate=evt.total;

        this.currentRate = Math.round((evt.loaded / evt.total) * 100);

        this.text = Math.round((evt.loaded / evt.total) * 100) + "%";
        console.log(this.currentRate);
        if (evt.loaded == evt.total) {
          this.$loadingshow();
        }
      } else {
      }
      // var time = document.getElementById("time");
      // var nt = new Date().getTime();//获取当前时间
      // var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
      // ot = new Date().getTime(); //重新赋值时间，用于下次计算
      // var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
      // oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
      //上传速度计算
      // var speed = perload/pertime;//单位b/s
      // var bspeed = speed;
      // var units = 'b/s';//单位名称
      // if(speed/1024>1){
      //     speed = speed/1024;
      //     units = 'k/s';
      // }
      // if(speed/1024>1){
      //     speed = speed/1024;
      //     units = 'M/s';
      // }
      // speed = speed.toFixed(1);
      //剩余时间
      // var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
      // time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
      // if(bspeed==0) time.innerHTML = '上传已取消';
    }
  }
};
</script>

<style lang="scss" scoped>
.van-uploader{
  margin-left: 20px;
    /* margin-top: 20px; */
    top: 10px;
}
/deep/ .el-textarea__inner{
height:72px;

}
/deep/ .van-circle__layer {
  -webkit-transform: unset;
  transform: unset;
}
/deep/ .van-circle__text {
  // color:#fff;
  font-size: 20px;
}
/deep/ .van-popup {
  background-color: unset;
}
.jindutiao {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  /* margin-top: 32px; */
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* bottom: 0; */
}
/deep/ .el-card.is-always-shadow {
  box-shadow: unset;
}
/deep/ .el-card {
  border: unset;
}
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
  word-break: break-all;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
